<template>

<table border="1px">
  <caption>
    个人简历
  </caption>
  <tr>
    <th>姓名</th>
    <th>性别</th>
    <th>年龄</th>
  </tr>
  <tr>
   <tr>
     <td>照片:<img :src="person.imgUrl" alt=""></img></td>
     <td>姓名：</td><td>{{person.name}}</td>
     <td>年龄：</td><td>{{person.age}}</td>
     <td>好友：</td><td>{{person.friend}}</td>
    </tr>

    <td>{{person.age}}</td>
    <td>{{person.imgUrl}}</td>
    <td>{{person.friend}}</td>
  </tr>
</table>

</template>
<script setup>
//定义对象，用于绑定
import {ref} from "vue";

const person =ref({
    name:'',
    age:'',
    imgUrl:'',
    friend:''
})
const loadPerson =()=>{
    person.value.name = '张三';
    person.value.age = 18;
    person.value.imgUrl = 'fcq.jpg';
    person.value.friend = '李四';
}
</script>


<style scoped>

</style>